<script setup>
import {reactive, ref, watch, watchEffect} from "vue";

let firstname=ref('')
let lastname=reactive({name:''})
let fullname=ref('')
/*
// 指定监听某个响应式数据
watch(firstname,(newValue,oldValue)=>{
  console.log("firstname由"+`${oldValue}`+"变为"+`${newValue}`)
})
watch(()=>lastname.name,(newValue,oldValue)=>{
  console.log("lastname由"+`${oldValue}`+"变为"+`${newValue}`)
  fullname.value=firstname.value+lastname.name
})
*/
/*默认监听所有响应式数据*/
watchEffect(()=>{
  console.log(firstname)
  console.log(lastname)
  fullname.value=fullname.value+lastname.name
})
</script>

<template>
firstname:<input type="text" v-model="firstname">
lastname:<input type="text" v-model="lastname.name">
fullname:<input type="text" v-model="fullname">
</template>

<style scoped>

</style>